<template>
	<div class="live-chat">
		<ul class="chat-gift">
			<li v-for="(item,index) in gifts" :key="index">
				<!-- <img :src=""> -->
				<span>{{item.fromNick}}</span>
				<!-- <img :src=""> -->
			</li>
		</ul>
		<ul class="chat-msg">
			<li v-for="(item,index) in msgs" :key="index">
				<!-- <img :src=""> -->
				<span>{{item.attach}}</span>
				<!-- <img :src=""> -->
			</li>
		</ul>
	</div>
</template>

<script>
	import {
		getMsgs,
		send,
		pushRoomMsg,
		exitChatroom
	} from "@/utils/nimChat.js";
	//import $animation from "@/utils/live_animation.js";
	import {
		getChatroomLists
	} from "@/api.js";
	import {
		Toast,
		MessageBox
	} from "mint-ui";
	import {
		getGuid
	} from "@/utils/index";
	export default {
		props: {
			liveInfo: {
				type: Object
			},
			sendMsg: {
				type: Object
			}
		},
		data() {
			return {
				msgs: [],
				gifts: [],
				userInfo2: null
			}
		},
		methods: {
			addMsg(msgs) {
				msgs.forEach(item => {
					this.msgs.push(item.msg);
					//播放动画
// 					switch (gift.name) {
// 						case '火箭':
// 							$animation.rocket();
// 							break;
// 						case '玫瑰花':
// 							$animation.rose();
// 							break;
// 						case '霓虹跑车':
// 							$animation.ferrari();
// 							break;
// 					}
				});
				console.info(msgs);
			}
		},
		mounted() {
			this.userInfo2 = JSON.parse(localStorage.userInfo2);
			this.$watch('sendMsg.send', () => {
				if (this.sendMsg && this.sendMsg.send) {
					if (this.sendMsg.send === 'text' && /^\s*$/.test(this.sendMsg.text)) {
						Toast({
							message: '内容不能为空',
							duration: 2000
						});
					} else {
						send('room', this.liveInfo.roomid, this.sendMsg[this.sendMsg.send], this.sendMsg.send, (error, msg) => {
							if (!error) {
								this.sendMsg[this.sendMsg.send] = '';
								this.addMsg([msg]);
								//$animation.rocket();
							} else {
								Toast({
									message: error.message,
									duration: 2000
								});
							}
							this.sendMsg.send = false;
						});
					}
				}
			});
		},
		watch: {
			liveInfo() {
				if (this.liveInfo && this.liveInfo.roomid) {
					pushRoomMsg(this.liveInfo.roomid, data => {
						//消息处理
						this.addMsg(data);
					});
				}
			}
		},
		destroyed() {
			exitChatroom();
		}
	};
</script>

<style>
	.live-chat {
		position: fixed;
		bottom: 1rem;
		left: 0;
		width: 80%;
	}

	.chat-msg {
		max-height: 5rem;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-content: flex-start;
		align-items: flex-start;
		flex-flow: column;
	}

	.chat-msg li {
		height: 0.7rem;
		border-radius: 0.2rem;
		background-color: #070618;
		color: white;
		margin: 0.2rem;
		line-height: 0.7rem;
		padding: 0.1rem 0.3rem;
	}
</style>
